import FilesPanel from "@/components/FilesPanel";
import Formatter from "@/components/Formatter";
import Javascript from "@/components/Javascript";
import Linter from "@/components/Linter";
import OrganizeImports from "@/components/OrganizeImports";
import type { RomeConfig } from "@/components/config";
import { Button, Card, Popover, Space, Tabs } from "antd";
import { useState } from "react";
import useForceUpdate from 'use-force-update';
import { min_app_fs, min_app_shell } from '@linksaas-minapp/api';
import { QuestionCircleOutlined } from "@ant-design/icons";

export default function Home() {
  const forceUpdate = useForceUpdate();
  const [romeCfg, setRomeCfg] = useState<RomeConfig>({});

  const openFile = async () => {
    let files = await min_app_fs.readFile(
      false,
      "json文件", ["json"]
    );
    if (files.length == 0) {
      return;
    }
    try {
      const content = new TextDecoder("utf-8").decode(files[0].file_data);
      const cfg = JSON.parse(content) as RomeConfig;
      setRomeCfg(cfg);
      forceUpdate();
    } catch (e) {
      console.log(e);
    }
  };

  const saveFile = async () => {
    const content = JSON.stringify(romeCfg, null, "  ");
    const data = new TextEncoder().encode(content);
    await min_app_fs.writeFile("rome.json", data);
  }


  return (
    <Card title={
      <Popover placement='right' trigger='hover' content={
        <div>
          <p>Rome is a formatter, linter, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS.</p>
          <p>Rome is designed to replace Babel, ESLint, webpack, Prettier, Jest, and others.</p>
          <p>Rome unifies functionality that has previously been separate tools. Building upon a shared base allows us to provide a cohesive experience for processing code, displaying errors, parallelizing work, caching, and configuration.</p>
          <p>Rome has strong conventions and aims to have minimal configuration. Read more about our project philosophy.</p>
          <p>Rome is written in Rust.</p>
          <p>Rome has first-class IDE support, with a sophisticated parser that represents the source text in full fidelity and top-notch error recovery.</p>
          <p>Rome is MIT licensed and moderated under the Contributor Covenant Code of Conduct.</p>
        </div>
      }>
        <span>rome配置助手&nbsp;<QuestionCircleOutlined /></span>
      </Popover>
    } extra={
      <Space>
        <Button type="link" onClick={e => {
          e.stopPropagation();
          e.preventDefault();
          min_app_shell.openBrowser("https://rome.tools/");
        }}>官方网站</Button>
        <Button onClick={e => {
          e.stopPropagation();
          e.preventDefault();
          setRomeCfg({});
          forceUpdate();
        }}>清空配置</Button>
        <Button onClick={e => {
          e.stopPropagation();
          e.preventDefault();
          openFile();
        }}>导入</Button>
        <Button onClick={e => {
          e.stopPropagation();
          e.preventDefault();
          saveFile();
        }}>导出</Button>
      </Space>
    }>
      <Tabs defaultActiveKey="files">
        <Tabs.TabPane key="files" tab="文件配置">
          <FilesPanel files={romeCfg.files} onChange={files => {
            setRomeCfg({ ...romeCfg, files });
            forceUpdate();
          }} />
        </Tabs.TabPane>
        <Tabs.TabPane key="linter" tab="规则配置">
          <Linter linter={romeCfg.linter} onChange={linter => {
            setRomeCfg({ ...romeCfg, linter });
            forceUpdate();
          }} />
        </Tabs.TabPane>
        <Tabs.TabPane key="formatter" tab="格式化配置">
          <Formatter formatter={romeCfg.formatter} onChange={formatter => {
            setRomeCfg({ ...romeCfg, formatter });
            forceUpdate();
          }} />
        </Tabs.TabPane>
        <Tabs.TabPane key="organizeImports" tab="优化导入配置">
          <OrganizeImports organizeImports={romeCfg.organizeImports} onChange={organizeImports => {
            setRomeCfg({ ...romeCfg, organizeImports });
            forceUpdate();
          }} />
        </Tabs.TabPane>
        <Tabs.TabPane key="javascript" tab="js/ts配置">
          <Javascript javascript={romeCfg.javascript} onChange={javascript => {
            setRomeCfg({ ...romeCfg, javascript });
            forceUpdate();
          }} />
        </Tabs.TabPane>
      </Tabs>
    </Card>
  )
}
